import React, { useState } from 'react';
import { Modal, Spin } from 'antd';
import { useSelector, useDispatch } from 'react-redux';

const { confirm, success, error } = Modal

function ResetPassword() {
    const dispatch = useDispatch();
    const [spinning, setSpinning] = useState(false)
    const [phone, setPhone] = useState('')

    const onSubmit = () => {
        if(!phone) {
            confirm({
                title: '手机号不能为空！',
                onOk() {},
                onCancel() {},
            }) 
            return
        }
        confirm({
            title: `确定重置${phone}的密码？`,
            onOk() {
                setSpinning(true)
                dispatch({
                    type: 'unit/resetPassword',
                    payload: {
                        body: {phone},
                        callback: (type) => {
                            setSpinning(false)
                            setPhone('')
                            if(type) {
                                success({
                                    title: '更改成功',
                                    content: '密码更改成功!'
                                })
                            } else {
                                error({
                                    title: '更改失败',
                                    content: '密码更改失败!'
                                })
                            }
        
                        }
                    }
                })
            },
            onCancel() {},
        }) 
    }



    return (
        <div
            style={{
                height: '100vh',
                display: 'flex',
                justifyContent: 'center',
                alignItems: 'center',
                flexDirection: 'column'
            }}
        >
            <Spin spinning={spinning}>
                <span style={{}}>重置后密码是： <span style={{ color: 'red' }}>12345</span></span>
                <br /><br />
                <label>
                    手机号码: <input value={phone} onChange={(e) => setPhone(e.target.value)} />
                    <button
                        style={{
                            cursor: 'pointer',
                            marginLeft: 20
                        }}
                        onClick={onSubmit}
                    >重置</button>
                </label>
            </Spin>
        </div>
    )
}

export default ResetPassword